import React, { useEffect, useState } from 'react';
import {
  Box,
  Checkbox,
  ContentImage,
  Grid,
  GridItem,
  Input,
  MainButton,
  makeToast,
  NumberInput,
  Pill,
  SecondaryButton,
  Select,
  Text,
} from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { CustomerMenuLayout } from 'beta/components/layouts/CustomerMenuLayout';
import Authentication from 'beta/store/authentication';
import { IContext } from 'beta/typings/context';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';

import {
  CustomerCostDecision,
  RepairRequestStatus,
  useCustomerNameQuery,
  usePatchRepairRequestMutation,
  usePostRepairMessageMutation,
  useRepairRequestMessagesQuery,
  useRepairRequestQuery,
} from '../../../../typings/graphql';

type VidgerdProps = {
  repairId?: string;
  customerId?: string;
  authentication?: Authentication;
};
type Form = {
  status: RepairRequestStatus;
  defectDescription: string;
  repairerDescription: string;
  customerCostDecision: CustomerCostDecision;
  repairCost: number;
};
type SimpleMessage = {
  subject: string;
  message: string;
  notifyCustomer: boolean;
};
const color = 'green' as MainColorType;

const Vidgerd = ({ repairId, authentication }: VidgerdProps) => {
  const { t } = useTranslation(['service', 'common']);
  const [show, setShow] = useState(false);
  const statusIcelandicMap: Record<RepairRequestStatus, string> = {
    New: t('common:repairs.status.new'),
    Received: t('common:repairs.status.received'),
    Waiting: t('common:repairs.status.waiting'),
    InRepair: t('common:repairs.status.inRepair'),
    Abroad: t('common:repairs.status.abroad'),
    Ready: t('common:repairs.status.ready'),
    InTransportationToAgent: t('common:repairs.status.inTransportationToAgent'),
    AtAgent: t('common:repairs.status.atAgent'),
    InTransportationToStore: t('common:repairs.status.inTransportationToStore'),
    SentToCustomer: t('common:repairs.status.sentToCustomer'),
    AtStore: t('common:repairs.status.atStore'),
    PickedUp: t('common:repairs.status.pickedUp'),
    DeviceReplaced: t('common:repairs.status.deviceReplaced'),
    Completed: t('common:repairs.status.completed'),
  };
  const customerCostDecisionIcelandicMap: Record<CustomerCostDecision, string> = {
    NoDecision: t('common:repairs.customerCostDecision.noDecision'),
    RepairAccepted: t('common:repairs.customerCostDecision.repairAccepted'),
    RepairRejected: t('common:repairs.customerCostDecision.repairRejected'),
    WaitingOnDecision: t('common:repairs.customerCostDecision.waitingOnDecision'),
    CustomerUnreachable: t('common:repairs.customerCostDecision.customerUnreachable'),
    NovaCoversCost: t('common:repairs.customerCostDecision.novaCoversCost'),
  };

  const customerCostOptions = Object.entries(customerCostDecisionIcelandicMap).map(
    ([key, value]) => ({ key: key as CustomerCostDecision, label: value }),
  );

  const statusOptions = Object.entries(statusIcelandicMap).map(([key, value]) => ({
    key: key as RepairRequestStatus,
    label: value,
  }));

  const { data, loading, error, refetch } = useRepairRequestQuery({
    variables: {
      input: {
        id: repairId ?? '',
      },
    },
    skip: !repairId,
  });

  const { data: messageData, refetch: messageRefetch } = useRepairRequestMessagesQuery({
    variables: {
      input: {
        repairRequestId: repairId ?? '',
      },
    },
    skip: !repairId,
  });

  const { data: customerData } = useCustomerNameQuery({
    variables: { input: { id: data?.repairRequest?.customerId } },
  });
  const [patch] = usePatchRepairRequestMutation({
    onCompleted() {
      refetch();
      makeToast.success(t('common:repairs.patchRepairSuccess'), '');
    },
    onError(error) {
      makeToast.danger(t('common:repairs.patchRepairError'), error.message);
    },
  });

  const [postMessage] = usePostRepairMessageMutation({
    onCompleted() {
      messageRefetch();
      makeToast.success(t('common:repairs.postMessageSuccess'), '');
    },
    onError(error) {
      makeToast.danger(t('common:repairs.postMessageErrorr'), error.message);
    },
  });
  const repair = data?.repairRequest;
  const messages = messageData?.repairRequestMessages;
  const customer = customerData?.customer;
  const isFinished = repair?.status === RepairRequestStatus.Completed;
  const isStaff = authentication?.isStaff;
  const [isChanging, setIsChanging] = useState(true);
  const [input, setInput] = useState<Form>({
    status: repair?.status ?? RepairRequestStatus.New,
    defectDescription: repair?.defectDescription ?? '',
    customerCostDecision: repair?.customerCostDecision ?? CustomerCostDecision.NoDecision,
    repairCost: repair?.repairCost ?? 0,
    repairerDescription: repair?.repairerDescription ?? '',
  });
  const [messageInput, setMessageInput] = useState<SimpleMessage>({
    message: '',
    subject: '',
    notifyCustomer: '',
  });
  const handleSubmitChange = async (id: string) => {
    await patch({
      variables: {
        input: {
          id: id,
          status: input.status,
          defectDescription: input.defectDescription,
          repairerDescription: input.repairerDescription,
          customerCostDecision: input.customerCostDecision,
          repairCost: input.repairCost,
        },
      },
    });
  };
  const handleSubmitMessage = async (repairRequestId: string) => {
    await postMessage({
      variables: {
        input: {
          repairRequestId: repairRequestId,
          subject: messageInput.subject,
          message: messageInput.message,
          notifyCustomer: messageInput.notifyCustomer,
        },
      },
    });
  };

  useEffect(() => {
    setInput({
      status: repair?.status ?? RepairRequestStatus.New,
      defectDescription: repair?.defectDescription ?? '',
      customerCostDecision: repair?.customerCostDecision ?? CustomerCostDecision.NoDecision,
      repairCost: repair?.repairCost ?? 0,
      repairerDescription: repair?.repairerDescription ?? '',
    });
  }, [repair]);

  if (loading) {
    return <>{t('common:repairs.loading')}</>;
  }
  if (!data || error) {
    return <>{t('common:repairs.notFound')}</>;
  }
  return (
    <Box>
      <CustomerMenuLayout
        color={color}
        isInverted={false}
        heroTitle={t('common:repairs.repair')}
        backButton={{
          renderAs: 'a',
          colorScheme: color,
          text: t('customerMenu.back'),
          icon: 'longArrowLeft',
          onClick: () => (window.location.href = `/${customer?.nationalId}/vidgerdir`),
        }}
        title={t('common:repairs.repair')}
        subtitle={repair?.requestNumber ?? ''}
        icon="return"
        details={[
          {
            label: repair?.registeredBy ? t('common:repairs.registeredBy') : '',
            value: repair?.registeredBy || '',
          },
          {
            label: repair?.saleDate ? t('common:repairs.registered') : '',
            value: repair?.saleDate ? formatDate(repair?.saleDate, 'dd.MM.yyyy') : '',
          },
          {
            label: repair?.requestNumber ? 'Viðgerðarnúmer' : '',
            value: repair?.requestNumber || '',
          },
          {
            label: repair?.deviceModel ? t('common:repairs.device') : '',
            value: repair?.deviceModel || '',
          },
          {
            label: repair?.vendor ? t('common:repairs.serviceProvider') : '',
            value: repair?.vendor ?? t('common:repairs.notRegistered'),
          },
          {
            label: repair?.status ? t('common:repairs.statusLabel') : '',
            value: (
              <Pill
                color={isFinished ? 'green' : 'attention'}
                text={repair?.status ? statusIcelandicMap[repair?.status] : 'Unknown'}
              />
            ),
          },
          {
            label: repair?.imei ? t('common:repairs.imei') : '',
            value: repair?.imei ?? '',
          },
        ]}
        actionButtons={[
          {
            icon: 'receipt',
            text: t('common:repairs.viewMessages'),

            onClick: () => setIsChanging(false),
          },
          {
            icon: 'info',
            text: t('common:repairs.changeInfoButton'),
            onClick: () => setIsChanging(true),
          },
        ]}
        price={{
          priceInfoLabel: t('common:repairs.repairCost'),
          priceInfo: repair?.repairCost?.toString() ?? '',
          monthlyPrice: '',
          monthlyPriceLabel: '',
        }}
        isStaff={isStaff}
        staffName={authentication?.username}
        staffMenuLinks={[]}
        userLabel={t('customerMenu.user')}
        payerLabel={''}
        {...(isStaff && {
          user: {
            name: customer?.name ?? '',
            nationalId: customer?.nationalId ?? '',
            email: repair?.email ?? '',
            ...(repair?.customerId && {
              onClick: () => (window.location.href = `/${customer?.nationalId}`),
            }),
          },
        })}
      >
        {isChanging && repair ? (
          <Box marginTop={-20} width="11/12" display="flex" flexDirection="column" gap={2}>
            <Box marginY={4}>
              <Box
                display="flex"
                flexDirection="row"
                alignItems="center"
                justifyContent="space-between"
                marginBottom={3}
              >
                <Text variant="pLargeBold">{t('common:repairs.moreDetails')}</Text>
                <SecondaryButton
                  colorScheme="green"
                  icon={show ? 'minus' : 'add'}
                  text={show ? 'Fela upplýsingar' : 'Ýtarlegri upplýsingar'}
                  onClick={() => setShow(!show)}
                />
              </Box>
              {show && (
                <Box
                  padding={3}
                  marginTop={3}
                  borderStyle="solid"
                  borderWidth="1px"
                  borderColor="grey300"
                >
                  <Grid gridTemplate={{ sm: 3, xl: 6 }}>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.handoverBy')}</Text>
                        <Text variant="pSmallRegular">{repair?.handoverBy}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.hasPasscode')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.hasPasscode ? t('common:repairs.yes') : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.lastNoteTime')}</Text>
                        <Text variant="pSmallRegular">{repair?.lastNoteTime}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.lastOpened')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.lastOpened ? formatDate(repair?.lastOpened, 'dd.MM.yyyy') : ''}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.lastSpeaker')}</Text>
                        <Text variant="pSmallRegular">{repair?.lastSpeaker}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.hasLoanDeviceCharger')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.hasLoanDeviceCharger
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.loanDeviceImei')}</Text>
                        <Text variant="pSmallRegular">{repair?.loanDeviceImei}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.loanDeviceType')}</Text>
                        <Text variant="pSmallRegular">{repair?.loanDeviceType}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.memoryCardReason')}</Text>
                        <Text variant="pSmallRegular">{repair?.memoryCardReason}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.memoryCardIncluded')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.memoryCardIncluded
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.needsSparePart')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.needsSparePart
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.newImei')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.newImei ? t('common:repairs.yes') : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.passcode')}</Text>
                        <Text variant="pSmallRegular">{repair?.passcode}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.pickupLocation')}</Text>
                        <Text variant="pSmallRegular">{repair?.pickupLocation}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">Skráð af: </Text>
                        <Text variant="pSmallRegular">{repair?.registeredBy}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.repairerAnalysis')}</Text>
                        <Text variant="pSmallRegular">{repair?.repairerAnalysis}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.sendAddress')}</Text>
                        <Text variant="pSmallRegular">{repair?.sendAddress}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.sendZip')}</Text>
                        <Text variant="pSmallRegular">{repair?.sendZip}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.serialNumber')}</Text>
                        <Text variant="pSmallRegular">{repair?.serialNumber}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">
                          {t('common:repairs.shouldContactSecondaryInfo')}
                        </Text>
                        <Text variant="pSmallRegular">
                          {repair?.shouldContactSecondaryInfo
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.email')}</Text>
                        <Text variant="pSmallRegular">{repair?.email}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.phoneNumber')}</Text>
                        <Text variant="pSmallRegular">{repair?.phoneNumber}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.secondaryEmail')}</Text>
                        <Text variant="pSmallRegular">{repair?.secondaryEmail}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.secondaryPhoneNumber')}</Text>
                        <Text variant="pSmallRegular">{repair?.secondaryPhoneNumber}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.underWarranty')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.underWarranty ? t('common:repairs.yes') : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.isBackupDone')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.isBackupDone ? t('common:repairs.yes') : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">
                          {t('common:repairs.couldNotReproduceDefect')}
                        </Text>
                        <Text variant="pSmallRegular">
                          {repair?.couldNotReproduceDefect
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.isFindMyIPhoneOff')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.isFindMyIPhoneOff
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.fullName')}</Text>
                        <Text variant="pSmallRegular">{repair?.fullName}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.isDeviceReceived')}</Text>
                        <Text variant="pSmallRegular">
                          {repair?.isDeviceReceived
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">
                          {t('common:repairs.isExpressAnalysisRequested')}
                        </Text>
                        <Text variant="pSmallRegular">
                          {repair?.isExpressAnalysisRequested
                            ? t('common:repairs.yes')
                            : t('common:repairs.no')}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.expressReason')}</Text>
                        <Text variant="pSmallRegular">{repair?.expressReason}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('common:repairs.imeiLabel')}</Text>
                        <Text variant="pSmallRegular">{repair?.imei}</Text>
                      </Box>
                    </GridItem>
                  </Grid>
                </Box>
              )}
            </Box>
            <Text variant="pMediumBold">{t('common:repairs.changingDescription')}</Text>
            <Select
              id="status"
              label={t('common:repairs.statusLabel')}
              name="status"
              isBold={false}
              onChange={(e) => {
                setInput({ ...input, status: e.target.value as RepairRequestStatus });
              }}
            >
              {statusOptions.map((status, index) => {
                return (
                  <option
                    key={index}
                    value={status?.key}
                    {...(input.status === status?.key && { selected: true })}
                  >
                    {status?.label}
                  </option>
                );
              })}
            </Select>
            <Input
              id="defectDescription"
              name="defectDescription"
              label={t('common:repairs.defectDescriptionLabel')}
              value={input.defectDescription}
              onChange={(e) => setInput({ ...input, defectDescription: e.target.value })}
              isBold={false}
            />
            <Input
              id="repairerDescription"
              name="repairerDescription"
              label="Lýsing viðgerðaraðila"
              value={input.repairerDescription}
              onChange={(e) => setInput({ ...input, repairerDescription: e.target.value })}
              isBold={false}
            />
            <Select
              id="customerCostDecision"
              label={t('common:repairs.customerCostDecisionLabel')}
              name="customerCostDecision"
              isBold={false}
              onChange={(e) => {
                setInput({
                  ...input,
                  customerCostDecision: e.target.value as CustomerCostDecision,
                });
              }}
            >
              {customerCostOptions.map((status, index) => {
                return (
                  <option
                    key={index}
                    value={status?.key}
                    {...(input.customerCostDecision === status?.key && { selected: true })}
                  >
                    {status?.label}
                  </option>
                );
              })}
            </Select>
            <NumberInput
              id="repairCost"
              numberType="number"
              label={t('common:repairs.repairCostLabel')}
              name="repairCost"
              value={input.repairCost.toString()}
              isBold={false}
              onChange={(e) => setInput({ ...input, repairCost: parseInt(e, 10) })}
            />
            <Box width="5/12" display="flex" marginTop={2}>
              <MainButton
                onClick={() => handleSubmitChange(repair?.id ?? '')}
                colorScheme="green"
                text={t('common:repairs.confirmButton')}
                dottedShadow="none"
              />
            </Box>
          </Box>
        ) : (
          <Box marginTop={-10}>
            <Text variant="pMediumBold">{t('common:repairs.messageDescription')}</Text>
            {messages?.map((m) => (
              <Box display="flex" flexDirection="column" key={m?.id}>
                {m?.repairRequestId === repair?.id && (m?.message || m?.subject) && (
                  <Box
                    marginTop={2}
                    borderStyle="solid"
                    borderColor="grey200"
                    padding={2}
                    boxShadow="small"
                  >
                    <ContentImage
                      color="green"
                      eyebrow={
                        m?.created && m?.sender
                          ? `${formatDate(m?.created, 'dd.MM.yyyy-hh:mm')} - ${
                              m?.sender ? `${m.sender}` : ''
                            }`
                          : ''
                      }
                      text={m?.message ?? ''}
                      subtitle={m?.subject ?? ''}
                      title={''}
                    />
                  </Box>
                )}
              </Box>
            ))}
            <Box marginTop={3} display="flex" flexDirection="column" gap={2} width="10/12">
              <Input
                id="subject"
                name="subject"
                label={t('common:repairs.subjectLabel')}
                value={messageInput.subject}
                onChange={(e) => setMessageInput({ ...messageInput, subject: e.target.value })}
              />
              <Input
                id="message"
                name="message"
                label={t('common:repairs.messageLabel')}
                value={messageInput.message}
                onChange={(e) => setMessageInput({ ...messageInput, message: e.target.value })}
              />
              <Checkbox
                type="checked"
                value={t('common:repairs.checkboxLabel')}
                isChecked={messageInput.notifyCustomer}
                onChange={(e) =>
                  setMessageInput({ ...messageInput, notifyCustomer: e.target.checked })
                }
                color="green"
              />
              <Box width="5/12">
                <MainButton
                  onClick={() => handleSubmitMessage(repair?.id ?? '')}
                  colorScheme="green"
                  text={t('common:repairs.sendMessageButton')}
                  dottedShadow="small"
                  isDisabled={!messageInput.message}
                />
              </Box>
            </Box>
          </Box>
        )}
      </CustomerMenuLayout>
    </Box>
  );
};

Vidgerd.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    repairId: query.repairId,
    customerId: query.customerId,
    namespacesRequired: ['service', 'common'],
  };
};

export default inject('authentication')(observer(Vidgerd));